<template>
    <div class="Category">
        <!-- 顶部搜索框 -->
        <van-search shape="round" placeholder="请输入搜索关键词" disabled @click="toSearchPage" />

        <!-- 分类选择组件 -->
        <van-tree-select height="85vh" :items="items" :main-active-index.sync="active" @click-nav="chanCategory">
            <template #content>
                <div class="container">
                    <!-- 图片 -->
                    <div class="img-container">
                        <img :src="currentCategory.banner_url" alt="">
                        <h2>{{currentCategory.front_desc}}</h2>
                    </div>

                    <!-- 大标题 -->
                    <div class="bigTitle">
                        <div class="line"></div>
                        <h3>{{currentCategory.name}}</h3>
                    </div>

                    <van-grid :column-num="3">
                        <van-grid-item  v-for="item,index in currentCategory.subCategoryList" :key="index">
                            <img :src="item.wap_banner_url" alt="" class="icon-image">
                            <span class="grid-text">{{item.name}}</span>
                        </van-grid-item>
                    </van-grid>
                </div>
            </template>
        </van-tree-select>
    </div>
</template>

<script>
import { getCatalogListData,getCurrentCatalogById } from '@/request/categoryApi'
export default {
    components: {

    },
    data() {
        return {
            categoryList: [],
            currentCategory: null,
            active: 0,
            items: [{ text: '分组 1' }, { text: '分组 2' }]
        }
    },
    computed: {

    },
    created() {
        getCatalogListData().then(res=>{
            let {categoryList,currentCategory} = res.data

            this.items = categoryList.map(item => {
                return  {text: item.name}
            })

            this.categoryList = categoryList
            this.currentCategory = currentCategory
        })
    },
    mounted() {

    },
    methods: {
      // 点击搜索框跳转
      toSearchPage() {
        this.$router.push("/home/searchPopup");
      },
      // 点击左侧tab
      chanCategory(index){
          
          getCurrentCatalogById({
              id:  this.categoryList[index].id
          }).then(res=>{
              this.currentCategory = res.data.currentCategory
          })
      }
    }
}
</script>

<style lang='less' scoped>
    /deep/.van-sidebar{
        width: 20%;
    }
    .container{
        width: 100%;
        .img-container{
            position: relative;
            img{  
                display: block;
                margin: 0 auto;
                width: 95%;
                border-radius: 5px;
                box-shadow: 0 0 6px #000;
                filter: brightness(0.5);
            }
            h2{
                width: 100%;
                color: #fff;
                position: absolute;
                top: 48%;
                left: 0%;
                z-index: 222;
                text-align: center;
            }
        }

        .bigTitle{
            width: 100%;
            height: 50px;
            position: relative;
            background: #fff;
            font-size: 16px;
            .line{
                width: 50%;
                height: 2px;
                background-color: #ccc;
                position: absolute;
                margin: auto;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
            }
            h3{
                width: 30%;
                height: 40px;
                background-color: #fff;
                position: absolute;
                margin: auto;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                line-height: 40px;
                text-align: center;
                color: #000;
            }
        }
    }
    .icon-image{
        width: .3rem;
        height: .3rem;
    }
    .grid-text{
        margin-top: .08rem;
        color:#646566;
        font-size: .12rem;
        line-height: 1.5;
        word-break: break-all;
    }
    
</style>
